<template>
  <div id="changePasswordPlus">
    <div id="changePassword">
      <h1>修改密码</h1>
      <el-form
        :label-position="labelPosition"
        label-width="100px"
        :model="changePasswordForm"
      >
        <el-form-item label="原密码:">
          <el-input
            v-model="changePasswordForm.oldpwd"
            placeholder="输入原密码"
            @blur="oldpwdalready"
            type="password"
          ></el-input>
          <!-- <div style="color:red">
            {{oldpwd1}}
          </div> -->
        </el-form-item>
        <el-form-item label="新密码:">
          <el-input
            v-model="changePasswordForm.newpwd"
            placeholder="输入新密码"
            class="inputkuang"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码:">
          <el-input
            v-model="changePasswordForm.newpwdAgain"
            placeholder="再次输入新密码"
            @blur="newAndNewAgain"
            type="password"
          ></el-input>
        </el-form-item>
        <el-button>取消</el-button>
        <el-button @click="changeSucss">确定</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
import * as api from "../../utils/api";
export default {
  name: "changePasseword",
  data() {
    return {
      labelPosition: "right",
      changePasswordForm: {
        userId: "",
        oldpwd: "",
        newpwd: "",
        newpwdAgain: "",
      },
      oldPwdRight: false,
      newANDnewagain: false,
      pwdstate: false,
      oldpwd1:'',
    };
  },
  methods: {
    newAndNewAgain() {
      if (
        this.changePasswordForm.newpwd === this.changePasswordForm.newpwdAgain
      ) {
        this.newANDnewagain = true;
      } else {
        this.$message.error("确认密码错误!");
      }
    },
    oldpwdalready() {
      if (this.changePasswordForm.oldpwd == "") {
        this.$message("你没有输入原密码!");
      } else {
        this.axios({
          url: api.GET_OLD_PWD,
          method: "get",
          params: { user_id: 1, user_pwd: this.changePasswordForm.oldpwd },
        }).then((data) => {
          if (data.data.code == 200) {
            this.oldPwdRight = true;
          }else{
            this.$message.error(data.data.msg)
            this.oldpwd1 = data.data.msg
          }
        });
      }
    },
    changeSucss() {
      if (this.oldPwdRight && this.newANDnewagain) {
        this.axios({
          url: api.POST_CHANGE_PWD,
          method: "post",
          params: { user_id: 1, user_pwd: this.changePasswordForm.newpwd },
        }).then((data) => {
          if (data.data.code == 200) {
            this.$message.success(data.data.msg);
            this.changePasswordForm = {
              userId: "",
              oldpwd: "",
              newpwd: "",
              newpwdAgain: "",
            };
            // this.$router.push("/login");
          } else {
            this.$message.error(data.data.msg);
          }
        });
      }
    },
  },
};
</script>

<style lang = 'less' scoped>
#changePassword {
  width: 500px;
  padding: 50px;
  margin: auto;
  background-color: rgba(0, 0, 0, 0.6);
  h1 {
    color: white;
    font-size: 30px;
    text-align: center;
    margin-bottom: 30px;
  }
}
/deep/.el-form-item__label {
  color: white;
  font-weight: bolder;
  font-size: 20px;
}
/deep/.el-input__inner {
  background-color: rgba(0, 0, 0, 0);
  border: 0;
  border-bottom: 1px solid white;
  border-radius: 0;
  height: 50px;
  font-size: 20px;
  color: white;
}

#changePasswordPlus {
  padding: 100px 0;
  width: 100%;
  background-size: 100% 100%;
}
</style>